<template>
  <!--数据清洗/数据检测内容 -->
  <div class="home">
    <div v-show="flag == 0" class="content">
      <div style="width: 1400px; height: 800px">
        <img
          src="@/assets/4-数据清洗-数据准入检测 – 安全检测.jpg"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>

      <div class="btns">
        <img
          @click="toSecond"
          src="@/assets/安全检测.png"
          alt=""
          style="width: 380px; height: 500px"
        />
        <img
          @click="toThird"
          src="@/assets/完整性检测.png"
          alt=""
          style="width: 380px; height: 500px"
        />
        <img
          @click="toFour"
          src="@/assets/重复性检测.png"
          alt=""
          style="width: 380px; height: 500px"
        />
      </div>
    </div>
    <div v-show="flag == 1" class="content">
      <div style="width: 1400px; height: 900px">
        <img
          src="@/assets/4-数据清洗-数据准入检测 – 安全检测 – 1.jpg"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>

      <!-- <img class="btn" src="../assets/停止.jpg" alt="" ref="btn" /> -->
      <div class="infoBox1">
        <p>
          {{ info }}
        </p>
      </div>
      <el-button class="btn1" @click="toBack">返回</el-button>

      <!-- 进度条 -->
      <div class="box">
        <el-progress
          color="#67c23a"
          :percentage="num"
          :stroke-width="10"
        ></el-progress>
      </div>
      <!-- 五个进度条 -->
      <div class="box1">
        <el-progress
          :percentage="num1"
          :stroke-width="10"
          :show-text="false"
        ></el-progress>
        <div class="text">
          {{ exceptionText }} <i class="el-icon-success"></i>
        </div>
      </div>
      <div class="box2">
        <el-progress
          :percentage="num2"
          :stroke-width="10"
          :show-text="false"
        ></el-progress>
        <div class="text">
          {{ exceptionText }}<i class="el-icon-success"></i>
        </div>
      </div>
      <div class="box3">
        <el-progress
          :percentage="num3"
          :stroke-width="10"
          :show-text="false"
        ></el-progress>
        <div v-if="num3 < 30" class="text">
          {{ exceptionText }}<i class="el-icon-success"></i>
        </div>
        <div v-if="num3 > 30 && num3 < 60" class="text1">
          {{ exceptionText1 }}<i class="el-icon-warning"></i>
        </div>
        <div v-if="num3 > 60" class="text1">
          {{ exceptionText2 }}<i class="el-icon-warning"></i>
        </div>
      </div>

      <div class="box4">
        <el-progress
          :percentage="num4"
          :stroke-width="10"
          :show-text="false"
        ></el-progress>
        <div class="text">
          {{ exceptionText }}<i class="el-icon-success"></i>
        </div>
      </div>
      <div class="box5">
        <el-progress
          :percentage="num5"
          :stroke-width="10"
          :show-text="false"
        ></el-progress>
        <div class="text">
          {{ exceptionText }}<i class="el-icon-success"></i>
        </div>
      </div>
    </div>
    <div v-show="flag == 2" class="content">
      <div style="width: 1400px; height: 900px">
        <img
          src="@/assets/4-数据清洗-数据准入检测 – 完整性检测 – 1.jpg"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>
      <!-- 进度条 -->
      <div class="boxAll">
        <el-progress
          color="#67c23a"
          :percentage="dataNum"
          :stroke-width="20"
        ></el-progress>
      </div>

      <div class="qustionNum1">{{ qustionNum1 }} 个</div>
      <div class="qustionNum2">{{ qustionNum2 }} 个</div>
      <div class="qustionNum3">{{ qustionNum3 }}</div>
      <div class="infoBox">
        <p>{{ info }}</p>
      </div>
      <el-button class="btn" @click="toBack">返回</el-button>
    </div>
    <div v-show="flag == 3" class="content">
      <div style="width: 1400px; height: 900px">
        <img
          src="@/assets/4-数据清洗-数据准入检测 – 重复性检测 – 1.jpg"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>
      <!-- 进度条 -->
      <div class="boxAll">
        <el-progress
          color="#67c23a"
          :percentage="aginNum"
          :stroke-width="20"
        ></el-progress>
      </div>
      <div class="total">{{ total1 }}</div>
      <div class="total1">{{ total }} 个</div>
      <div class="infoBox">
        <p>
          {{ info }}
        </p>
      </div>

      <el-button class="btn" @click="toBack">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: 0,
      num: 0,
      num1: 0,
      num2: 0,
      num3: 0,
      num4: 0,
      num5: 0,
      exceptionText: "暂未发现风险",
      exceptionText1: "发现1个可疑问题",
      exceptionText2: "发现2个可疑问题",
      dataNum: 0,
      qustionNum1: 0,
      qustionNum2: 0,
      qustionNum3: "0.00%",
      aginNum: 0,
      total: 0,
      total1: 0,
      timer: null,
      info: "",
      infoList: [
        // "C:Program Files/Common/FilesJava+wwww/jjj/opopop/...",
        // "C:Program Files/Common /FilesJava+poyt/09/klioj/mnbv",
        // "C:Program Files/Common /FilesJava+poiuy/wert/cbtgd/iut/...",
      ],
    };
  },
  mounted() {},
  methods: {
    toBack() {
      this.flag = 0;
      clearInterval(this.timer);
      clearInterval(this.timer2);
      clearInterval(this.timer3);
      this.num = 0;
      this.num1 = 0;
      this.num2 = 0;
      this.num3 = 0;
      this.num4 = 0;
      this.num5 = 0;
      this.dataNum = 0;
      this.qustionNum1 = 0;
      this.qustionNum2 = 0;
      this.qustionNum3 = "0.00%";
      this.aginNum = 0;
      this.total = 0;
      this.total1 = 0;
      this.info = "";
    },
    // 点击事件
    toSecond() {

      
      setInterval(() => {
        if (this.num > 92) {
          this.num = 100;
        } else {
          this.num += 5 * Math.random();
          this.num = parseInt(this.num);
        }
      }, 120);

      
      setInterval(() => {
        if (this.num1 > 92) {
          this.num1 = 100;
        } else {
          this.num1 += 5 * Math.random();
          this.num1 = parseInt(this.num1);
        }
      }, 100);
      setInterval(() => {
        if (this.num2 > 92) {
          this.num2 = 100;
        } else {
          this.num2 += 5 * Math.random();
          this.num2 = parseInt(this.num2);
        }
      }, 80);
      setInterval(() => {
        if (this.num3 > 92) {
          this.num3 = 100;
        } else {
          this.num3 += 5 * Math.random();
          this.num3 = parseInt(this.num3);
        }
      }, 110);
      setInterval(() => {
        if (this.num4 > 92) {
          this.num4 = 100;
        } else {
          this.num4 += 5 * Math.random();
          this.num4 = parseInt(this.num4);
        }
      }, 100);
      setInterval(() => {
        if (this.num5 > 92) {
          this.num5 = 100;
        } else {
          this.num5 += 5 * Math.random();
          this.num5 = parseInt(this.num5);
        }
      }, 60);

      this.flag = 1;
      this.timer = setInterval(() => {
        if (this.num < 100) {
          // this.num++;
          // this.num1 += 10;
          // this.num2 += 5;
          // this.num3 += 2;
          // this.num4 += 3;
          // this.num5 += 1;
          
          if (this.num >= 10) {
            this.info =
              "C:ProgramData/ATI/IDEA/idea/node/web/css/OPP/PHP/KIT...";
          }
          if (this.num >= 20) {
            this.info =
              "C:ProgramData/ATI/JQUERY/idea/can/poto/kit/query/kill/copy/lill...";
          }
          if (this.num >= 30) {
            this.info =
              "C:ProgramData/ATI/JAVA/idea/yuo/yad/js/code/yuo/yad/js/yuo/yad/js...";
          }
          if (this.num >= 40) {
            this.info =
              "C:ProgramData/code/html/css/display/none/yuo/yad/js/yuo/yad/js/yuo/yad/js...";
          }
          if (this.num >= 50) {
            this.info =
              "C:ProgramData/opp/data/reader/whrite/file/qeaderopp/data/readeropp/data/reader...";
          }
          if (this.num >= 60) {
            this.info = "C:ProgramData/opp/data/reader/idea/yad/js/code/...";
          }
          if (this.num >= 70) {
            this.info =
              "C:ProgramData/ATI/ACE/idea/yuo/yad/js/code/opp/data/readeropp/data/readeropp/data/reader...";
          }
          if (this.num >= 80) {
            this.info =
              "C:ProgramData/ATI/ACE/idea/yuo/yad/js/code/idea/yuo/code/filt/codeidea/yuo/code/filt/codeidea/...";
          }
          if (this.num >= 90) {
            this.info =
              "C:ProgramData/mate/rote/cate/idea/yuo/yad/js/code//filt/cod/filt/cod/filt/cod...";
          }
          if (this.num >= 100) {
            this.info =
              "C:ProgramData/mate/rote/cate/idea/yuo/code/filt/code/idea/yuo/yad/js/idea/yuo/yad/js/yuo/yad/js/...";
          }
        } else {
          clearInterval(this.timer);
        }
      }, 10);
    },
    toThird() {
      this.flag = 2;
      this.info = "";
      clearInterval(this.timer);
      this.timer2 = setInterval(() => {
        if (this.dataNum >= 0 && this.dataNum < 100) {
          this.dataNum++;
          if (this.dataNum == 10) {
            this.info =
              "C:ProgramData/ATI/IDEA/idea/node/web/css/OPP/PHP/KIT...";
          }
          if (this.dataNum == 20) {
            this.info =
              "C:ProgramData/ATI/JQUERY/idea/can/poto/kit/query/kill/copy/lill...";
          }
          if (this.dataNum == 30) {
            this.info =
              "C:ProgramData/ATI/JAVA/idea/yuo/yad/js/code/yuo/yad/js/yuo/yad/js...";
          }
          if (this.dataNum == 40) {
            this.info =
              "C:ProgramData/code/html/css/display/none/yuo/yad/js/yuo/yad/js/yuo/yad/js...";
          }
          if (this.dataNum == 50) {
            this.info =
              "C:ProgramData/opp/data/reader/whrite/file/qeaderopp/data/readeropp/data/reader...";
          }
          if (this.dataNum == 60) {
            this.info = "C:ProgramData/opp/data/reader/idea/yad/js/code/...";
          }
          if (this.dataNum == 70) {
            this.info =
              "C:ProgramData/ATI/ACE/idea/yuo/yad/js/code/opp/data/readeropp/data/readeropp/data/reader...";
          }
          if (this.dataNum == 80) {
            this.info =
              "C:ProgramData/ATI/ACE/idea/yuo/yad/js/code/idea/yuo/code/filt/codeidea/yuo/code/filt/codeidea/...";
          }
          if (this.dataNum == 90) {
            this.info =
              "C:ProgramData/mate/rote/cate/idea/yuo/yad/js/code//filt/cod/filt/cod/filt/cod...";
          }
          if (this.dataNum == 100) {
            this.info =
              "C:ProgramData/mate/rote/cate/idea/yuo/code/filt/code/idea/yuo/yad/js/idea/yuo/yad/js/yuo/yad/js/...";
          }
          if (this.dataNum > 30 && this.dataNum < 100) {
            this.qustionNum1 = 1;
            this.qustionNum2 = 1;
            this.qustionNum3 = "20.45%";
          }
          if (this.dataNum > 50 && this.dataNum < 100) {
            this.qustionNum1 = 2;
            this.qustionNum2 = 2;
            this.qustionNum3 = "50.79%";
          }
          if (this.dataNum > 60 && this.dataNum < 100) {
            this.qustionNum2 = 3;
            this.qustionNum3 = "100.89%";
          }
        }
      }, 10);
    },
    toFour() {
      this.flag = 3;
      this.info = "";
      clearInterval(this.timer2);
      this.timer3 = setInterval(() => {
        if (this.aginNum == 10) {
          this.info = "C:ProgramData/ATI/IDEA/idea/node/web/css/OPP/PHP/KIT...";
        }
        if (this.aginNum == 20) {
          this.info =
            "C:ProgramData/ATI/JQUERY/idea/can/poto/kit/query/kill/copy/lill...";
        }
        if (this.aginNum == 30) {
          this.info =
            "C:ProgramData/ATI/JAVA/idea/yuo/yad/js/code/yuo/yad/js/yuo/yad/js...";
        }
        if (this.aginNum == 40) {
          this.info =
            "C:ProgramData/code/html/css/display/none/yuo/yad/js/yuo/yad/js/yuo/yad/js...";
        }
        if (this.aginNum == 50) {
          this.info =
            "C:ProgramData/opp/data/reader/whrite/file/qeaderopp/data/readeropp/data/reader...";
        }
        if (this.aginNum == 60) {
          this.info = "C:ProgramData/opp/data/reader/idea/yad/js/code/...";
        }
        if (this.aginNum == 70) {
          this.info =
            "C:ProgramData/ATI/ACE/idea/yuo/yad/js/code/opp/data/readeropp/data/readeropp/data/reader...";
        }
        if (this.aginNum == 80) {
          this.info =
            "C:ProgramData/ATI/ACE/idea/yuo/yad/js/code/idea/yuo/code/filt/codeidea/yuo/code/filt/codeidea/...";
        }
        if (this.aginNum == 90) {
          this.info =
            "C:ProgramData/mate/rote/cate/idea/yuo/yad/js/code//filt/cod/filt/cod/filt/cod...";
        }
        if (this.aginNum == 100) {
          this.info =
            "C:ProgramData/mate/rote/cate/idea/yuo/code/filt/code/idea/yuo/yad/js/idea/yuo/yad/js/yuo/yad/js/...";
        }
        if (this.aginNum >= 0 && this.aginNum < 100) {
          this.aginNum++;
        }
        if (this.aginNum > 30 && this.aginNum < 100) {
          this.total += 100;
          this.total1 += 44;
        }
        if (this.aginNum > 50 && this.aginNum < 100) {
          this.total += 222;
          this.total1 += 1222;
        }
        if (this.aginNum > 60 && this.aginNum < 100) {
          this.total += 3000;
          this.total1 += 5000;
        }
        if (this.aginNum == 100) {
          clearInterval(this.timer3);
        }
      }, 10);
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  .content {
    position: absolute;
    top: -0.5%;
    left: 20%;
    .btns {
      position: absolute;
      top: 25%;
      left: 8%;
      img {
        cursor: pointer;
        margin-right: 35px;
      }
      img:hover {
        border: 1px solid #409eff;
        border-radius: 10px;
      }
    }
    .box {
      width: 980px;
      height: 20px;
      position: absolute;
      top: 26%;
      left: 17%;
    }
    .box1 {
      width: 950px;
      position: absolute;
      top: 41%;
      left: 24%;
      ::v-deep .el-progress-bar {
        float: left;
        width: 80%;
      }
      .text {
        margin-top: -15px;
        width: 20%;
        float: right;
        color: #999;
        font-size: 14px;
        font-weight: 900;
        text-align: right;
        i {
          // margin-left: 5px;

          font-size: 30px;
          color: rgba(223, 219, 219, 0.856);
        }
      }
    }
    .box2 {
      width: 950px;
      position: absolute;
      top: 48%;
      left: 24%;
      ::v-deep .el-progress-bar {
        float: left;
        width: 80%;
      }
      .text {
        margin-top: -15px;
        width: 20%;
        float: right;
        color: #999;
        font-size: 14px;
        font-weight: 900;
        text-align: right;
        i {
          // margin-left: 5px;
          font-size: 30px;
          color: rgba(223, 219, 219, 0.856);
        }
      }
    }
    .box3 {
      width: 950px;
      position: absolute;
      top: 55%;
      left: 24%;
      ::v-deep .el-progress-bar {
        float: left;
        width: 80%;
      }
      .text {
        margin-top: -15px;
        width: 20%;
        float: right;
        color: #999;
        font-size: 14px;
        font-weight: 900;
        text-align: right;
        i {
          // margin-left: 5px;

          font-size: 30px;
          color: rgba(223, 219, 219, 0.856);
        }
      }
      .text1 {
        margin-top: -15px;
        width: 15%;
        float: right;
        color: red;
        font-size: 14px;
        font-weight: 900;
        text-align: right;
        i {
          font-size: 30px;
          color: red;
        }
      }
      ::v-deep .el-progress-bar {
        float: left;
        width: 80%;
      }
      ::v-deep .el-progress__text {
        color: #fff;
      }
    }

    .box4 {
      width: 950px;
      position: absolute;
      top: 62%;
      left: 24%;
      ::v-deep .el-progress-bar {
        float: left;
        width: 80%;
      }
      .text {
        margin-top: -15px;
        width: 20%;
        float: right;
        color: #999;
        font-size: 14px;
        font-weight: 900;
        text-align: right;
        i {
          // margin-left: 5px;

          font-size: 30px;
          color: rgba(223, 219, 219, 0.856);
        }
      }
    }
    .box5 {
      width: 950px;
      position: absolute;
      top: 69%;
      left: 24%;
      ::v-deep .el-progress-bar {
        float: left;
        width: 80%;
      }
      .text {
        margin-top: -15px;
        width: 20%;
        float: right;
        color: #999;
        font-size: 14px;
        font-weight: 900;
        text-align: right;
        i {
          // margin-left: 5px;

          font-size: 30px;
          color: rgba(223, 219, 219, 0.856);
        }
      }
    }
    .boxAll {
      width: 1000px;
      height: 20px;
      position: absolute;
      top: 27%;
      left: 20%;
      ::v-deep .el-progress-bar {
        float: left;
        width: 90%;
        // margin-right:s 10px;
      }
    }
    .qustionNum1 {
      font-size: 30px;
      position: absolute;
      top: 46%;
      left: 22%;
      color: orange;
      font-weight: 900;
    }
    .qustionNum2 {
      font-size: 30px;
      position: absolute;
      top: 46%;
      left: 44%;
      color: red;
      font-weight: 900;
    }
    .qustionNum3 {
      font-size: 35px;
      position: absolute;
      top: 45.5%;
      left: 83%;
      color: #409eff;
      font-weight: 900;
    }
    .total {
      font-size: 30px;
      position: absolute;
      top: 45.5%;
      left: 16%;
      color: orange;
      font-weight: 900;
    }
    .total1 {
      font-size: 30px;
      position: absolute;
      top: 45.5%;
      left: 48%;
      color: red;
      font-weight: 900;
    }
  }
}
.infoBox {
  width: 80%;
  height: 200px;
  overflow-y: auto;
  position: absolute;
  top: 65%;
  left: 8%;
  font-size: 20px;
  text-align: left;
}

.infoBox1 {
  width: 80%;
  height: 140px;
  overflow-y: auto;
  position: absolute;
  top: 76%;
  left: 8%;
  font-size: 20px;
  text-align: left;
  p {
    display: block;
    height: 40px;
  }
}
.btn {
  position: absolute;
  top: 90%;
  left: 45%;
  cursor: pointer;
  background: #409eff;
  width: 160px;
  height: 50px;
  font-size: 18px;
}
.btn1 {
  position: absolute;
  top: 95%;
  left: 45%;
  cursor: pointer;
  background: #409eff;
  width: 160px;
  height: 50px;
  font-size: 18px;
}
</style>